import {SourceLogo} from './SourceLogo';
import React from 'react';
import style from './ProductDetail.module.scss';
import {OuterLink} from './BookDetail';
import {CommentOutlined, PayCircleOutlined, StarOutlined} from '@ant-design/icons';

export const ProductDetail=(props)=>{
  const {jd_id: jdId,
    dd_id: ddId,
    jd_price: jdPrice,
    dd_price: ddPrice,
    comment_count: commentCount,
    average_score: averageScore,
  } = props;
  const price = jdPrice || ddPrice;
  const logo = <SourceLogo source={jdId?'jd':'dd'} noMargin={true}/>;

  return <div className={style.wrapper}>
    <div className={style.content}>
      {logo}
    </div>
    <div className={style.label}><PayCircleOutlined key={'icon'}/></div><div title={price} className={style.content}>{price}</div>
    <div className={style.label}><CommentOutlined/></div><div title={commentCount} className={style.content}>{commentCount}</div>
    <div className={style.label}><StarOutlined/></div><div title={averageScore} className={style.content}>{averageScore}</div>
    {jdId && <OuterLink className={style.content} link={`https://item.jd.com/${jdId}.html`} text={'链接'}/>}
    {ddId && <OuterLink className={style.content} link={`http://product.dangdang.com/${ddId}.html`} text={'链接'}/>}
  </div>;
};
